import React, {PureComponent} from 'react';
import {actionCreator} from "../store";
import {connect} from "react-redux";

class Banner extends PureComponent {

    //获取 轮播图的数据
    getBannerList() {
        const {bannerList, lastIndex, currentIndex} = this.props;

        if (bannerList.size > 0) {

            return bannerList.map((item, index) => {

                let styleTips;
                if (index === lastIndex) {
                    styleTips = bannerOutsideStyle;
                } else if (index === currentIndex) {
                    styleTips = bannerInsideStyle;
                } else {
                    styleTips = bannerNormalStyle;
                }

                return (
                    <div key={item.get("id")} style={styleTips}>
                        <img src={item.get("imagePath")} alt={"alt"} style={bannerImgStyle}/>
                    </div>
                );
            });

        } else {
            return null;
        }
    }


    //处理 定时器
    handlerTimer() {
        this.props.updateTimer(null);
        const timer = setInterval(() => this.handlerTimerThink(), 4000);
        this.props.updateTimer(timer);
    }

    handlerTimerThink() {
        if (this.props.bannerTimer !== null) {
            if (this.props.bannerList.size > 0) {
                let numberCurrent = this.props.currentIndex;
                const numberLast = numberCurrent;
                if (numberCurrent < this.props.bannerList.size - 1) {
                    numberCurrent += 1;
                } else {
                    numberCurrent = 0;
                }
                this.props.updateBannerIndex(numberLast, numberCurrent);
            } else {
                console.log("list is null ");
            }
        } else {
            console.log("bannerTimer is null");
        }

    }


    render() {
        return (
            <div style={bannerWrapperStyle}
                 onMouseEnter={() => {
                     this.props.updateTimer(null);
                     clearInterval(this.props.bannerTimer);}
                 }
                 onMouseLeave={
                     () => {
                         this.handlerTimer();
                     }
                 }>
                {/*轮播图*/}
                {this.getBannerList()}
                {/*小圆点*/}
                <ul style={bannerCircleUl}>
                    {
                        this.props.bannerList.map((item, index) => {
                            return <li
                                style={this.props.currentIndex === index ? bannerCircleCurrentLi : bannerCircleLi}
                                key={item.get("id")}
                                onClick={() => {
                                    let lastIndex = this.props.currentIndex;
                                    this.props.updateBannerIndex(lastIndex, index);
                                }}
                            />
                        })
                    }
                </ul>
            </div>
        );

    }

    componentDidMount() {
        this.props.getBannerInfo();
        this.handlerTimer();

    }

    componentWillUnmount() {
        this.props.updateTimer(null);
        clearInterval(this.props.bannerTimer);
    }

}


const mapState = (state) => {
    return {
        bannerList: state.getIn(["bodyReducer", "bannerList"]),
        bannerTimer: state.getIn(["bodyReducer", "bannerTimer"]),
        lastIndex: state.getIn(["bodyReducer", "lastIndex"]),
        currentIndex: state.getIn(["bodyReducer", "currentIndex"]),

    }
};

const dispatchMapState = (dispatch) => {
    return {
        getBannerInfo() {
            const action = actionCreator.getBannerList();
            dispatch(action);
        },
        updateTimer(timer) {
            const action = actionCreator.updateBannerTimer(timer);
            dispatch(action);
        },
        updateBannerIndex(lastIndex, currentIndex) {
            const action = actionCreator.changeBannerIndex(lastIndex, currentIndex);
            dispatch(action);
        }
    }
};


export default connect(mapState, dispatchMapState)(Banner);


// css
const bannerWrapperStyle = {
    width: 866,
    height: 300,
    marginTop: 20,
    position: "relative",
    overflow: 'hidden',
    borderRadius:6,
    boxShadow:"2px 2px 2px #ccc",
};

//正常样式
const bannerNormalStyle = {
    width: 866,
    background: "green",
    position: "absolute",
    transform: "translateX(866px)",
};

//进入样式
const bannerInsideStyle = {
    width: 866,
    position: "absolute",
    transition: "all 1s linear",
    transform: "translateX(0)",
};

//推出样式
const bannerOutsideStyle = {
    width: 866,
    position: "absolute",
    transition: "all 1s linear",
    transform: "translateX(-866px)",
};

const bannerImgStyle = {
    width: "100%",
    height: 300,
    verticalAlign: "top",
};

const bannerCircleUl = {
    height: 20,
    position: "absolute",
    bottom: 20,
    right: 20,
};

const bannerCircleLi = {
    width: 10,
    height: 10,
    margin: 5,
    display: "block",
    float: "left",
    borderRadius: 5,
    backgroundColor: 'darkgray',
    cursor: "pointer",
};

const bannerCircleCurrentLi = {
    width: 10,
    height: 10,
    margin: 5,
    display: "block",
    float: "left",
    borderRadius: 5,
    backgroundColor: 'green',
    cursor: "pointer",
};